<template>
	<div style="background-color: #f4fafe">
		<div class="tognlan">
			<div style="margin-left: 80px" class="tltext">
				<span>试卷名:{{ testPaper.name }} </span>
				<span style="margin-left: 50px">总分:{{ testPaper.testPaperScore }}分</span>
			</div>
			<div style="margin-right: 20px">
				<el-button type="success" round @click="goback" class="active">交卷</el-button>
			</div>
		</div>
		<div class="bigdiv">
			<div class="card">
				<div class="cardtext">答题卡</div>
				<hr />
				<div class="Main_head">
					<div v-for="(item, idx) in questions" :key="idx" @click="pages(idx)" :class="{ active: item.button }" class="main">
						{{ idx + 1 }}
					</div>
					<!-- <span style="background-color: #03d3bd; margin-top: 10px">5</span> -->
				</div>
				<!-- <hr /> -->
			</div>
			<div class="content">

				<div class="topic_main">
					<div>题目</div>
					<div>共{{questions.length}}题</div>
				</div>
				<div class="question" v-for="(item, idx) in questions" :key="idx">
					<div>{{ `${idx + 1}.[${item.name}]` }}</div>
					<div style="display: flex">
						<div v-html="`${md(item.content)}`"></div>
					</div>
					<div>

						<div v-for="(Ite, index) in item.optionsList" :key="index" style="margin-left: 1.25rem; margin-top: 20px; display: flex">
							<div v-if="item.topicId == 1">
								<el-radio v-model="item.username" :label="Ite.id" style="margin-top: 0.625rem" @change="ChangeItem(idx)">
									<div style="display: flex">
										{{ letter[index] }}:
										<div v-html="`${md(Ite.content)}`"></div>
									</div>
								</el-radio>
							</div>
							<div v-if="item.topicId == 2">
								<el-checkbox-group v-model="item.answerList">
									<el-checkbox :label="Ite.id" :key="indx" @change="ChangeItem(idx)" style="margin-top: 1.25rem">
										<div style="display: flex">
											{{ letter[index] }}:
											<div v-html="`${md(Ite.content)}`"></div>
										</div>
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div v-if="item.topicId == 3">
							<div v-for="(Item, indx) in exam" :key="indx + 'hh'" style="display: flex">
								<el-radio v-model="item.username" :label="Item.id" style="margin-top: 0.625rem" @change="ChangeItem(idx)">
									<div>{{ letter[indx] }}:{{ Item.value }}</div>
								</el-radio>
							</div>
						</div>
						<div v-if="item.topicId == 4" style="height: 22.5rem" >
							<quill-editor v-model="item.username" style="
		       height: 260px;
		       background-color: white;
		       margin-top: 1.25rem;
		     "
			 @click="ChangeItem(idx)"
			 ></quill-editor>
						</div>

					</div>
					<div @click="item.butto=!item.butto" style="cursor: pointer;margin-top: 1.25rem;margin-left: 1.25rem;color: #ffaa00;">查看答案</div>
					<div v-show="item.butto">

						<ul style="background-color: #f9f9f9; margin-top: 10px">
							<div v-if="item.name == '单选题'||item.name == '多选题'">
								<li>标答:{{ Anwer[idx].answer }}</li>
							</div>
							<div v-if="item.name == '判断题'">
								<li>标答:{{ item.answer == 1 ? "正确" : "错误" }}</li>
							</div>
							<div v-if="item.name == '填空题'||item.name == '简单题'">
								<li>标答:{{ item.answer }}</li>
							</div>

							<li>分数：{{ item.score }}</li>
							<li>
								难度：<el-rate v-model="item.difficulty" :max="5" :texts="texts" show-text disabled="disabled">
								</el-rate>
							</li>
							<li>解析：{{item.parsing }}</li>
						</ul>
					</div>

				</div>
			</div>
			<div></div>
		</div>
	</div>
</template>

<script>
	import marked from "marked";
	import {
		TestManager
	} from "../../request/test.js";
	export default {
		name: "mytest",
		data() {
			return {
				pdresult: true,
				checkList: [],
				Testid: this.$route.query.Testid,
				questions: [],
				letter: ["A", "B", "C", "D", "E", "F", "G", "H", "R", "J", "K", "L"],
				testPaper: {},
				exam: [{
						value: "正确",
						id: 1,
					},
					{
						value: "错误",
						id: 0,
					},
				],
				tableList: [],
				Anwer: [],
				texts: ["一星", "二星", "三星", "四星", "五星"],
				indx: ''
			};
		},
		methods: {

			changepd() {
				// console.log("忙上了");
				this.pdresult = !this.pdresult;
			},
			goback() {
				var singleList = [];
				var multipleList = [];
				var judgeList = [];
				var fillsList = [];
				var shortAnswer = [];
				let data = [];
				for (let i = 0; i < this.questions.length; i++) {
					// alert(this.danxuanti[i].id);
					if (this.questions[i].topicId !== 2) {
						singleList.push({
							questionId: this.questions[i].id,
							questionAnswer: this.questions[i].username
						});

					} else if (this.questions[i].topicId === 2) {
						multipleList.push({
							questionId: this.questions[i].id,
							questionAnswer: this.questions[i].answerList.join(',')
						});
					}
				}
				data.push(...singleList);
				data.push(...multipleList);
				data.push(...judgeList);
				data.push(...fillsList);
				data.push(...shortAnswer);
				TestManager.addTestRecord(data, 480, this.Testid).then(res => {
					console.log(res);
					if (res.data.code == 500) {
						this.$message({
							message: res.data.message,
							type: 'warning'
						});
					} else {
						this.$message({
							message: '提交成功',
							type: 'success'
						});
						this.$router.push({
							'name': 'ExamStatistics',
							params: {
								'AnswerRecord': res.data.data
							}
						});

					}


				})
			},
			getQuestionnaireTest() {
				var parmas = {
					id: this.Testid,
				};
				const loading = this.$loading({
					lock: true,
					text: "正在加载...",
					spinner: "el-icon-loading",
					background: "rgba(0, 0, 0, 0.7)",
				});
				TestManager.getTestPaperInfo(this.qs.stringify(parmas))
					.then((res) => {
						loading.close();
						console.log(res);
						this.testPaper = res.data.data.testPaper;
						const qList = ['singleList', 'multipleList', 'judgeList', 'fillsList', 'shortAnswerList'];
						qList.forEach(q => {
							this.tableList[q] = res.data.data[q].map(item => {
								return {
									...item,
									answerList: [],
									username: '',
									butto: false
								}
							})

						})
						this.questions = [...this.tableList.singleList, ...this.tableList.multipleList, ...this.tableList.judgeList,...this.tableList.fillsList]
						console.log(this.questions);

						//获取答案
						var map = new Map();
						//存入map
						for (let i = 0; i < this.questions.length; i++) {
							if (
								this.questions[i].topicId == 1 ||
								this.questions[i].topicId == 2
							) {
								for (
									let j = 0; j < this.questions[i].optionsList.length; j++
								) {
									map.set(
										this.questions[i].optionsList[j].id,
										this.letter[j]
									);
									console.log(this.letter[j]);
								}
							}
							//获取标准答案
							var ans = this.questions[i].answer.split(",");
							var an = [];
							for (let i = 0; i < ans.length; i++) {
								an.push(map.get(parseInt(ans[i])));
							}
							var answer = an.join(",");
							var p = {
								answer: answer
							};
							this.Anwer.push(p);
						}
					});
				// TestManager.getQuestionnaireTest(this.qs.stringify(parmas)).then((e) => {
				//   console.log(e);
				//   loading.close();
				//   this.question = e.data.data;
				//   this.textname = this.question.testPaper.name;
				//   this.questions = e.data.data.questions.map((q) => {
				//     return {
				//       ...q,
				//       answerList: [],
				//     };
				//   });
				//   console.log(this.questions);
				//   this.testPaper = e.data.data.testPaper;
				// });
			},
			pages(id) {
				document.getElementsByClassName("question")[id].scrollIntoView();
			},
			ChangeItem(id) {
				// alert(id);
				this.questions[id].button = true;
				// this.$set(this.questions[id], 'button', true);
				// console.log(this.questions[id])
			},
			md(content) {
				return marked(content);
			},
		},
		created() {
			this.getQuestionnaireTest();
		},
	};
</script>

<style lang="scss" scoped>
	// * {
	//   background-color: #ebeef5;
	// }
	.Main_head {
		display: flex;
		flex-wrap: wrap;
	}

	.main {
		height: 40px;
		width: 40px;
		line-height: 40px;
		text-align: center;
		background: seashell;
		margin: 10px;
		border-radius: 5px;
	}

	.tognlan {
		display: flex;
		background-color: white;
		justify-content: space-between;
		height: 70px;
		line-height: 70px;

		margin-right: 20px;
	}

	// .tltext {
	//   margin-top: 20px;
	//   flex: 1;
	//   height: 30px;
	//   background-color: white;
	// }
	.tltext {
		margin-left: 100px;
		font-weight: bold;
		font-size: 25px;
	}

	.tlbtn {
		margin-top: 50px;
		margin-right: 50px;
	}

	.cardtext {
		height: 20px;
		width: 300px;
		padding: 20px;
	}

	.cardbtn {
		margin-top: 10px;
		width: 300px;
		height: 400px;
	}

	.card {
		margin-top: 60px;
		margin-left: 80px;
		width: 20%;
		background-color: #fff;
	}

	.fivebtn {
		margin: 0;
		margin-top: 10px;
	}

	.bigdiv {
		display: flex;
	}

	.content {
		height: 700px;
		width: 70%;
		margin-left: 30px;
		margin-top: 60px;
		background-color: #fff;
		overflow: scroll;
	}

	// .content > span {
	//   //   position: absolute;
	//   //   top: 20px;
	//   //   left: 20px;
	// }
	.question {
		width: 100%;
		min-height: 200px;
		margin-top: 20px;
	}

	.pwbtn {
		//   margin-bottom: 100px;
		margin-top: 150px;
		margin-left: 50px;
	}

	.optionbtn {
		margin: 10px 20px;
	}

	.question {
		flex: 5;
		display: flex;
		flex-direction: column;
		padding: 50px;
		border-bottom: 1px solid #dfdfdf;
	}

	.question li {
		list-style: none;
		display: block;
		height: 40px;
		margin-left: 1.875rem;
		display: flex;
		align-items: center;
	}

	.question span {
		display: inline-block;
		height: 20px;
		padding: 2px 5px;
		border-radius: 3px;
		border: 1px solid #fdf6ec;
	}

	.question .yes {
		background: #f0f9eb;
		color: #97d3bf;
	}

	.question .no {
		background-color: #ffaa00;
		color: white;
	}

	.left {
		margin-top: 3.25rem;
		background-color: #ffffff;
		width: 100px;
		text-align: center;
	}

	.left div {
		margin-top: 0.875rem;
	}

	.Bottom {
		position: absolute;
		bottom: 0;
		overflow: hidden;
		display: flex;
	}

	#videobox {
		flex-shrink: 0;
	}

	#video {
		width: 100%;
	}

	#canvas {
		position: absolute;
		z-index: -1;
	}

	.active {
		background-color: #03d3bd;
		color: white;
		border: none;
	}

	.el-radio {
		display: flex;
		margin-top: 0.625rem;
	}

	.topic_main {
		display: flex;
		justify-content: space-between;
		padding: 20px;
	}
</style>
